<template>
	<div style="padding:0px;">
		<el-card class="box-card">
		  <!-- <div slot="header" class="clearfix">
		    <span style="line-height: 30px;"></span>
		  </div> -->
		  <div  class="text item" >
			  <el-form :model="dialogForm" ref="dialogForm" :label-width="formLabelWidth" :rules="rules">
			  	<el-form-item label="手机号"  prop="username">
			      <el-input v-model="dialogForm.username" type="tel" auto-complete="off" :disabled="!dialogSendData.isAdd"></el-input>
			    </el-form-item>
			    <el-form-item label="真实姓名"  prop="realname">
			      <el-input v-model="dialogForm.realname"  auto-complete="off" :disabled="!dialogSendData.isAdd"></el-input>
			    </el-form-item>
			    <el-form-item label="密码"  prop="pwd">
			    	<input type="text" style="position:absolute;right:10000px;">
			      <el-input v-model="dialogForm.pwd" type="password" auto-complete="off" :disabled="!dialogSendData.isAdd"></el-input>
			    </el-form-item> 
			    <el-form-item label="用户类别"     prop="type">
			      <el-select   v-model.number="dialogForm.type" filterable placeholder="请选择用户类型" :disabled="!dialogSendData.isAdd">
			      	 <el-option 
					      v-for="(item,index) in userTypeMap"
					      :key="parseInt(index)"
					      :label="item"
					      :value="parseInt(index)">
					 </el-option> 
				  </el-select>
			    </el-form-item>
			  
			    <el-form-item label="用户类型"  prop="userType">
			      
				  <el-select @change="setCertifyType()" v-model="dialogForm.userType" filterable placeholder="请选择用户类别" :disabled="!dialogSendData.isAdd||this.dialogSendData.id!==''"> 
				    <el-option 
					      v-for="(item,index) in userType"
					      :key="parseInt(index)"
					      :label="item"
					      :value="parseInt(index)">
					 </el-option> 
				  </el-select>
			    </el-form-item>
			    	 
			    <el-form-item label="证件类型"  prop="certifyType">
			      <el-select v-model="dialogForm.certifyType" filterable placeholder="请选择证件类型" :disabled="true">
				    <el-option
				      v-for="(item,index) in certifyTypeMap"
				      :key="parseInt(index)"
					  :label="item"
					  :value="parseInt(index)">
				    </el-option>
				  </el-select>
			    </el-form-item>

			    <el-form-item label="证件号"  prop="documentId">
			      <el-input v-model="dialogForm.documentId"  auto-complete="off" :disabled="this.dialogSendData.id!==''"></el-input>
			    </el-form-item>
			    <!-- 点击显示再次点击隐藏 -->
			    <el-form-item   placeholder="请选择部门" label="部门"  style="position:relative;" class="is-required">
			    	<el-input :value="dialogForm.departmentName"   @click.native="elTreeStu=!elTreeStu" auto-complete="off" readonly class="elTreeInput"></el-input>
			    	<div class="elTree" v-show="elTreeStu">
			    		<el-tree :data="departmentArray" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
			    	</div>
			    </el-form-item>

			    <el-form-item label="岗位"  prop="userPosition" >
			      <el-select v-model="dialogForm.userPosition" filterable placeholder="请选择岗位" :disabled="!dialogSendData.isAdd">
				    <el-option
				      v-for="(item,index) in userPositionMap"
				      :key="parseInt(index)"
					  :label="item"
					  :value="parseInt(index)">
				    </el-option>
				  </el-select>
			    </el-form-item> 
			 
			    <el-form-item label="角色"  >
			      <el-checkbox-group v-model="dialogForm.roleList" :disabled="!dialogSendData.isAdd">
				      <el-checkbox v-for="(item,index) in roleObjectList" :key="item.id" :label="item.id" name="type">
				      {{ item.roleName}}</el-checkbox> 
				    </el-checkbox-group>
			    </el-form-item>
			    
			    <el-form-item label="备注"  prop="remark">
			      <el-input  type="textarea" :rows=3 v-model="dialogForm.remark"  auto-complete="off" :disabled="!dialogSendData.isAdd"></el-input>
			    </el-form-item>
			    
			  </el-form>
			</div>
		</el-card>
				
		<div  style="text-align:right;margin-top:15px;">
			 <el-button @click="returnBack">返 回</el-button>
			 <el-button type="primary" @click="submitConfirmForm('dialogForm')">提 交</el-button>
		</div>
	</div>
</template>
<script>
    import agentHttp from '@/utils/agentHttp.js'
    import {require,phone,decimalTwo} from '@/utils/rules.js'
	export default{
		components:{},
		created(){		
			this.selectPageInfo(); 
			if(this.dialogSendData.id!==""){
	      		//修改
	      		//this.selectData(); 
	      	}
        },

        updated(){
        },
		props:['dialogSendData','tableData'],
		data(){
			return{ 
		        defaultProps: {
		          children: 'childStockDepartment',
		          label: 'departmentName'
		        },
		        elTreeStu:false,
		        options:[],
				formLabelWidth:'170px',
				//弹窗或者查看页面信息
		         dialogForm:{
		          	userType:null,
		          	certifyType:null,
		         	type:null,
		         	documentId:null,
		         	userPosition:null,
		         	roleList:[],
		         	departmentName:""

		        },
		        //验证规则
		        rules: {
		          username: [
		            { required: true, trigger: 'blur' ,message: '请填写手机号码',},{ validator: phone, trigger: "blur" }
		          ],
		          realname:[
		            {required: true, message: '请填写真实姓名', trigger: 'blur'}
		          ],
		          pwd:[
		            {required: true, message: '请填写密码', trigger: 'blur'}
		          ],
		          type:[
		            {required: true, message: '请选择用户类别', trigger: 'change',type:"number"}
		          ],
		          userType:[
		            {required: true, message: '请选择用户类型', trigger: 'change',type:"number"}
		          ],
		          departmentId:[
		            {required: true, message: '请选择部门', trigger: 'chenge',type:"number"}
		          ],
		          
		          documentId:[
		            {required: true, message: '请填写证件号', trigger: 'blur'}
		          ],
		          userPosition:[
		            {required: true, message: '请选择岗位', trigger: 'change',type:"number"}
		          ],
		          /*roleList:[
		            {required: true, message: '请勾选角色', trigger: 'change',type: 'array',}
		          ]*/
		        }, 
				departmentArray : [],
  				userPositionMap:{},
				userTypeMap:{},
				userType:{1:"个人",2:"企业"},
				certifyTypeMap:{1:"身份证",6:"营业执照"},
				roleList : [],
				roleObjectList :[]

			}
		},methods:{
			//点击节点赋值
			handleNodeClick(data) { 
				if(data.departmentType==3){
					this.elTreeStu=!this.elTreeStu
				}
		        this.dialogForm.departmentName=data.departmentName;
		        this.dialogForm.departmentId=data.id;
		    },
			returnBack(){
				this.dialogSendData.dialogFormVisible=false;
			},
			submitConfirmForm(formName){
                this.$refs[formName].validate((valid) => {
		          if (valid) {
		          	if(this.dialogSendData.id===""){
		          		//添加
		          	    this.addData();
		          	}else{
		          		//修改
		          		this.editData();
		          	}
		          	// setTimeout(()=>{
		          	// 	this.dialogSendData.dialogFormVisible=false;
		          	// },500)
		          } else {
		           this.$nextTick(()=>{
		          	   setTimeout(()=>{this.$message.warning(document.getElementsByClassName('el-form-item__error')[0].innerText);},500) 
		               return false;
		            })
		          }
		        });
			},
		    addData(){  
		        agentHttp.postJson('adminApi/admin/user/post_validated',this.dialogForm).then((data)=>{
		            if(data.success){  
		            	this.$emit('refreshSeachData', null); 
		            	this.$message.success(data.data);
		            	this.dialogSendData.dialogFormVisible=false;
		            } 
		        }) 
		    },
		    editData(){
		        agentHttp.putJson('adminApi/admin/user/put_validated',this.dialogForm).then((data)=>{
		            if(data.success){  
		            	this.$emit('refreshSeachData', null); 
		            	this.$message.success(data.data);
		            	this.dialogSendData.dialogFormVisible=false;
		            } 
		        }) 
		    },
		    selectData(){
		    	//console.log('取消下方注释，修改请求地址')
		        agentHttp.get('adminApi/admin/carousel/select_carousel/'+this.dialogSendData.id).then((data)=>{	
		            if(data.success){  
		            	this.dialogForm = data.data; 
		            } 
		        }) 
		    },
		    selectPageInfo(){
		    	var userId = 0;
		    	if(this.dialogSendData.id != ""){
		    		userId = this.dialogSendData.id;
		    	}
		    	agentHttp.get('adminApi/admin/user/add_update_page_info/' + userId).then((data)=>{	
		            if(data.success){  
		            	this.departmentArray = data.data.departmentAll;
			  			this.userPositionMap = data.data.userPosition;
						this.userTypeMap = data.data.userType;   
						this.roleObjectList  = data.data.roleObjectList;
						//如果是修改的话 显示数据
						if(this.dialogSendData.id != ""){
				    		this.dialogForm = data.data.userInfo;
				    		this.dialogForm.roleList = []; 
				    		for (var i = 0; i < data.data.userInfo.roleObjectList.length; i++) {
				    			 var id = data.data.userInfo.roleObjectList[i].id;
				    			 this.dialogForm.roleList.push(id); 
				    		} 
				    	}
		            } 
		        }) 
		    },
		    setCertifyType(){  
		    	//个人
		    	if( this.dialogForm.userType  === 1){
		    		this.dialogForm.certifyType = 1;
		    	}else {
		    			//营业执照
		    		this.dialogForm.certifyType = 6;
		    	}
		    	 
		    }

		}
	}
</script>
